<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="400" height="400" viewBox="0 0 100 100">
        <rect x="20" y="20" width="40" height="40" >
            <set attributeName="fill" to="red" begin="1s" />
            <set attributeName="stroke" to="#00f" dur="2s" />
            <set attributeName="x" to="30" begin="1s" dur="2s" fill="freeze" />
        </rect>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <path fill="none" stroke="#00f" stroke-width="1" >
            <set id="s1" attributeName="d" to="M30 30 h40 v40 h-40 z" dur="1s" begin="0;s3.end" />
            <set id="s2" attributeName="d" to="M30 50 A20 20 0 0 1 70 50A 20 20 0 0 1 30 50" dur="1s" begin="s1.end" />
            <set id="s3" attributeName="d" to="M50 30 L30 70 L 70 70 Z" dur="1s" begin="s2.end"/>
        </path>    
    </svg>

    <script src="index.js"></script>
</body>
</html>